<template>
    <div class="home">
        <div>
            <van-search
            v-model="value"
            show-action
            label="地址"
            placeholder="请输入搜索关键词"
            >
                <template #action>
                    <div @click="onClickButton(value)">搜索</div>
                </template>
            </van-search>
        </div>
        <van-tabs animated>
            <!-- 使用transaction实现页面切换动画效果 -->
            <van-tab v-for="index in 4" :title="'选项 ' + index" :key="index">
                <div v-show="index===1">
                    <div v-for="item in list" :key="item.id" @click="texts(item.id)">
                        <!-- 列表组件封装 -->
                        <Item :item="item"></Item>
                    </div>
                </div>
                <div v-show="index!==1">
                    内容 {{ index }}
                </div>
            </van-tab>
        </van-tabs>
    </div>
</template>
<script lang="ts" setup>
import { onMounted,ref } from 'vue';
import {useStore} from 'vuex'
import {stateList} from '@/store'
import { computed } from '@vue/reactivity';
import {useRouter} from 'vue-router'
import Item from '../../components/item/indexView.vue'
const router=useRouter()
const value=ref('')
const store=useStore<stateList>()
    // 正确使用Vuex 实现列表数据的获取
const list=computed(()=>store.state.list)
const texts=(id:string)=>{
    // 路由传参跳转详情页
    router.push(`/text${id}`)
}
const onClickButton=(value:string)=>{
    store.dispatch('itemAxios',value)
}
onMounted(()=>{
    store.dispatch('listAxios')
})
</script>
<style lang="scss">
.home{
    width: 100%;
    height: 100%;
}
.item{
    width: 100%;
    height: 150px;
    display: flex;
    justify-content: space-around;
    line-height: 150px;
}
</style>